$(function() {
	var WangeSlide = (function() {
		//配置
		var config = {
			//是否自动切换
			autoSwitch : true,
			//自动切换间隔时间（毫秒）
			interval : 2000,
			//轮播图图片路径
			picPath : 'images/',
			//轮播图图片信息：图片文件名 / 图片标题 / 图片指向链接
			picInfo : [
				['picadv01.jpg'],
				['picadv02.jpg'],
				['picadv03.jpg'],
				['picadv04.jpg'],
				['picadv05.jpg'],
				
			]
		};
		
		//获取图片信息
		/**
		 * @param index 图片所在的索引值
		**/
		var getImgInfo = function(index) {
			var imgSrc = config.picPath + config.picInfo[index][0],
				imgAlt = config.picInfo[index][1],
				imgUrl = config.picInfo[index][2],
				imgId = 'slide_' + (index+1).toString(),
				imgHtml = '<li id="' + imgId + '" style="background:center center no-repeat url(' + imgSrc + ')">' +
							'	<a href="' + imgUrl +'" title="' + imgAlt + '" target="_blank" class="pic">' +
							'"' + imgAlt + '"' +
							'	</a>' +
						'</li>';
				slideTextHtml = '<a href="' + imgUrl + '" target="_blank" title="' + imgAlt + '" rel="nofollow">' + imgAlt + '</a>';
			return {
				imgAlt : imgAlt,
				imgUrl : imgUrl,
				imgHtml : imgHtml,
				slideTextHtml : slideTextHtml
			}
		};
		
		//图片完全加载后缓慢加载显示
		var fadeInImg = function(el, speed) {
			el.load(function() {
				$(this).fadeIn(speed)
			});
		};
		
		//图片切换
		/**
		 * @param index 图片所在的索引值
		 * @param triggerCurEl 当前触发节点元素
		**/
		var imgSwitch = function(index, triggerCurEl) {
			var slideId = 'slide_' + (index+1).toString(),
				slideIdEl = document.getElementById(slideId);
			if (slideIdEl) {
				//如果已有对应的元素，则显示已有元素
				var panelLi = $('#panel ul li', '#slide');
				panelLi.fadeOut('slow');
				$(slideIdEl).fadeIn('slow');
			} else {
				//如果还没有对应的元素，则注入元素
				$(getImgInfo(index).imgHtml).appendTo($('#panel ul', '#slide'));
				
				//载入显示图片
				fadeInImg($('.slide_thumb', slideIdEl), 'slow');
			}
			
			//获取图片的 alt 作为显示信息
			$('#slide_text').html(getImgInfo(index).slideTextHtml);
			
			//当前状态 cur
			$('#trigger ul li', '#slide').removeClass('cur');
			triggerCurEl.addClass('cur');
		};
		
		//轮播图
		var slide = function() {
			//设置轮播图尺寸
			$('#slide').css({
				'width' : config.width + 'px',
				'height' : config.height + 'px'
			});
			
			//初使化轮播图，只加载第一张图片信息
			$('#panel ul', '#slide').html(getImgInfo(0).imgHtml);
			
			//载入显示图片
			fadeInImg($('.slide_thumb', '#slide_1'), 500);
			
			//注入背景层 + 触发器容器 + 轮播图文字容器
			var slideBg = '<div id="slide_bg"></div>',
				trigger = '<div id="trigger"></div>',
				slideText = '<div id="slide_text"></div>';
			$('#panel').after(slideBg + trigger + slideText);
			
			//获取图片的 alt 作为显示信息
			$('#slide_text').html(getImgInfo(0).slideTextHtml);
			
			//注入触发节点
			var triggerUl = $('<ul></ul>');
			triggerUl.appendTo($('#trigger'));
			for (var i=0, j=config.picInfo; i<j.length; i++) {
				$('<li>' + (i+1).toString() + '</li>').appendTo(triggerUl);
			}
			
			//当前状态 cur
			$('#trigger ul li:first').addClass('cur');
			
			//点击触发节点
			var triggerLi = $('#trigger ul li', '#slide');
			triggerLi.click(function() {
				var index = triggerLi.index($(this));
				imgSwitch(index, $(this));
			});
			
			//鼠标悬停时，停止切换
			var goSwitch = true;
			$('#slide').hover(
				function() {goSwitch = false},
				function() {goSwitch = true}
			);
			
			//自动切换
			if (config.autoSwitch) {
				setInterval(function() {
					if (goSwitch) {
						//判断当前cur所在的索引值
						var index = parseInt($('.cur', '#trigger').text()) - 1;
						if (index > (config.picInfo.length-2)) {
							index = -1;
						}
						imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));
					}
				}, config.interval);
			}
		};
		
		return {
			//初使化
			init : function() {
				slide();
			}
		}
	})();
	
	WangeSlide.init();
})